

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/icon/dw.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Memory">
  <meta name="keywords" content="">
  
    <meta name="description" content="🌭 我的项目简介、技术实践与成果展示，回顾项目的起因和所面临的技术挑战">
<meta property="og:type" content="article">
<meta property="og:title" content="项目回顾 - 实践经验和收获总结">
<meta property="og:url" content="http://example.com/2023/04/22/%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE%20-%20%E5%AE%9E%E8%B7%B5%E7%BB%8F%E9%AA%8C%E5%92%8C%E6%94%B6%E8%8E%B7%E6%80%BB%E7%BB%93/index.html">
<meta property="og:site_name" content="Memory&#39;s blog">
<meta property="og:description" content="🌭 我的项目简介、技术实践与成果展示，回顾项目的起因和所面临的技术挑战">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/artical/sky0414.jpg">
<meta property="article:published_time" content="2023-04-22T13:09:39.000Z">
<meta property="article:modified_time" content="2024-04-10T17:23:47.000Z">
<meta property="article:author" content="Memory">
<meta property="article:tag" content="经验">
<meta property="article:tag" content="项目简介">
<meta property="article:tag" content="架构设计">
<meta property="article:tag" content="Gitee&#x2F;Github">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="http://example.com/img/artical/sky0414.jpg">
  
  
  
  <title>项目回顾 - 实践经验和收获总结 - Memory&#39;s blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.4","typing":{"enable":true,"typeSpeed":100,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  

  

  

  

  

  

  

  



  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 75vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Memory&#39;s blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                <span>友链</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/newBG/girl.jpg') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="项目回顾 - 实践经验和收获总结"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        Memory
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-04-22 21:09" pubdate>
          2023年4月22日 晚上
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          9.5k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          24 分钟
        
      </span>
    

    
    
      
        <span id="leancloud-page-views-container" class="post-meta" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="leancloud-page-views"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar category-bar" style="margin-right: -1rem">
    





<div class="category-list">
  
  
    
    
    
    <div class="category row nomargin-x">
      <a class="category-item 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="项目简介"
        id="heading-dcb8ee94be150f19b518ddee0953d426" role="tab" data-toggle="collapse" href="#collapse-dcb8ee94be150f19b518ddee0953d426"
        aria-expanded="true"
      >
        项目简介
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-dcb8ee94be150f19b518ddee0953d426"
           role="tabpanel" aria-labelledby="heading-dcb8ee94be150f19b518ddee0953d426">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="架构设计"
        id="heading-9890f8168ebf6ea5b0dd4727375ff5d4" role="tab" data-toggle="collapse" href="#collapse-9890f8168ebf6ea5b0dd4727375ff5d4"
        aria-expanded="true"
      >
        架构设计
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-9890f8168ebf6ea5b0dd4727375ff5d4"
           role="tabpanel" aria-labelledby="heading-9890f8168ebf6ea5b0dd4727375ff5d4">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="Gitee/Github"
        id="heading-13046fcfa66e2ada6bb0d881cc5ba3f6" role="tab" data-toggle="collapse" href="#collapse-13046fcfa66e2ada6bb0d881cc5ba3f6"
        aria-expanded="true"
      >
        Gitee/Github
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-13046fcfa66e2ada6bb0d881cc5ba3f6"
           role="tabpanel" aria-labelledby="heading-13046fcfa66e2ada6bb0d881cc5ba3f6">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="经验"
        id="heading-32a8e000e928e6dc255876d9fc0178b3" role="tab" data-toggle="collapse" href="#collapse-32a8e000e928e6dc255876d9fc0178b3"
        aria-expanded="true"
      >
        经验
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-32a8e000e928e6dc255876d9fc0178b3"
           role="tabpanel" aria-labelledby="heading-32a8e000e928e6dc255876d9fc0178b3">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/2023/04/22/%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE%20-%20%E5%AE%9E%E8%B7%B5%E7%BB%8F%E9%AA%8C%E5%92%8C%E6%94%B6%E8%8E%B7%E6%80%BB%E7%BB%93/" title="项目回顾 - 实践经验和收获总结"
           class="list-group-item list-group-item-action
           active">
          <span class="category-post">项目回顾 - 实践经验和收获总结</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
</div>


  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">项目回顾 - 实践经验和收获总结</h1>
            
              <p class="note note-success">
                
                  
                    本文最后更新于：2 个月前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/sky0414.jpg"></p>
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><ul>
<li>这个栏目将回顾在<strong>我的个人项目开发过程中</strong>，所面临过的<strong>技术挑战</strong>和<strong>经验总结</strong></li>
</ul>
<blockquote>
<h4 id="项目探秘-技术创新与业务突破"><a href="#项目探秘-技术创新与业务突破" class="headerlink" title="项目探秘 - 技术创新与业务突破"></a>项目探秘 - 技术创新与业务突破</h4></blockquote>
<ul>
<li>🥇<strong>从背景到实现</strong>：介绍<strong>项目的起因</strong>和<strong>实现目标</strong>、<strong>挑战</strong>、<strong>技术栈</strong>和<strong>项目启动方法</strong></li>
<li>🥈<strong>架构设计与业务流程</strong>：探索项目所采用的<strong>技术栈</strong>和架构设计，解析项目的<strong>核心结构</strong>和<strong>流程</strong></li>
<li>🥉<strong>功能模块深度剖析</strong>：详细介绍项目中的<strong>关键功能</strong>和<strong>模块</strong>，总结项目中的<strong>关键业务流程</strong>和<strong>取得的成果</strong></li>
</ul>
<h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="Memory-Cal-忆算云"><a href="#Memory-Cal-忆算云" class="headerlink" title="Memory Cal 忆算云"></a>Memory Cal 忆算云</h2><p>访问地址：<a target="_blank" rel="noopener" href="http://182.92.203.240:7001/#/">memory-calculate</a></p>
<h2 id="Memory-BI智能分析平台"><a href="#Memory-BI智能分析平台" class="headerlink" title="Memory BI智能分析平台"></a>Memory BI智能分析平台</h2><h2 id="项目概述"><a href="#项目概述" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称"><a href="#项目名称" class="headerlink" title="项目名称"></a>项目名称</h3><blockquote>
<h4 id="Memory-BI智能分析平台-1"><a href="#Memory-BI智能分析平台-1" class="headerlink" title="Memory BI智能分析平台"></a>Memory BI智能分析平台</h4></blockquote>
<h3 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>🎓 学校社交：在大学校园里，学生们可以通过该平台找到志同道合的朋友，组织兴趣小组、参加线下活动，分享学习经验，丰富校园生活。</li>
<li>🌆 新城市社交：在新城市里，新移民或者刚刚毕业的年轻人可以通过该平台结识新朋友，扩大社交圈子，分享生活经验和资源，融入新的生活环境。</li>
<li>💼 专业领域社交：该平台可为专业人士提供行业交流和合作的地方，包括分享行业动态、经验和资源，促进专业成长和项目合作。</li>
</ul>
<h3 id="主要功能"><a href="#主要功能" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>这是一个通信交友平台，由三个社区组成：<ul>
<li>👩‍🎓 <strong>用户中心</strong>：用户可以<strong>设置个人资料</strong>、<strong>搜索其他用户并添加好友</strong>、管理<strong>好友列表</strong>，还可以<strong>自由组队</strong>结识志同道合的朋友。</li>
<li>📞 <strong>聊天大厅</strong>：提供<strong>实时双向通信功能</strong>，用户可以和在线好友进行<strong>即时聊天</strong>，<strong>发送文字</strong>、<strong>表情</strong>、<strong>图片</strong>和<strong>语音消息</strong>，支持群聊，<strong>在线状态显示</strong>和<strong>消息通知功能</strong>增强了与好友的联系。</li>
<li>📚 <strong>博文社区</strong>：用户可以<strong>浏览、发布和评论博文</strong>，写<strong>长篇博客</strong>、<strong>心情随笔</strong>或分享图片等，与其他用户进行互动和交流，通过标签或关键词搜索感兴趣的博文，<strong>扩大知识和交友圈子</strong>。</li>
</ul>
</li>
<li>这个通信交友社区的<strong>目标</strong>是为用户提供一个互动交流的社区，让用户可以在这里<strong>找到志同道合的朋友、分享自己的想法和经验</strong>，并且享受到<strong>在线聊天</strong>、<strong>博文发布</strong>和<strong>交友组队</strong>的乐趣。</li>
</ul>
<h3 id="项目启动"><a href="#项目启动" class="headerlink" title="项目启动"></a>项目启动</h3><ul>
<li>拉取代码后，应该<strong>如何运行该项目</strong>？</li>
</ul>
<h4 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h4><ul>
<li>配置 <code>MySQL</code>、<code>Redis</code> 为本机地址：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># MySQL配置</span><br><span class="hljs-attr">datasource:</span><br>  <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.cj.jdbc.Driver</span><br>  <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://localhost:3306/xxx</span><br>  <span class="hljs-attr">username:</span> <span class="hljs-string">xxx</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">xxx</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Redis 配置</span><br><span class="hljs-attr">redis:</span><br>  <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br>  <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  <span class="hljs-attr">timeout:</span> <span class="hljs-number">5000</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">Dw990831</span><br></code></pre></td></tr></table></figure>

<h4 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h4><ul>
<li>确保本地 <strong>Node.js 环境配置</strong>完成，版本为 v18.xx</li>
<li>修改请求的<strong>后端地址</strong>：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs react">const instance = axios.create(&#123;<br>    baseURL: &quot;http://localhost:8081/api&quot;,<br>    withCredentials: true,<br>    timeout: 10000,<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li>执行以下命令，一键启动前端项目：</li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> serve<br></code></pre></td></tr></table></figure>

<h2 id="技术选型"><a href="#技术选型" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-1"><a href="#前端-1" class="headerlink" title="前端"></a>前端</h3><h3 id="后端-1"><a href="#后端-1" class="headerlink" title="后端"></a>后端</h3><h2 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h2><h3 id="架构设计"><a href="#架构设计" class="headerlink" title="架构设计"></a>架构设计</h3><p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231108131609835.png" alt="image-20231108131609835"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231108131616060.png" alt="image-20231108131616060"></p>
<h3 id="功能模块"><a href="#功能模块" class="headerlink" title="功能模块"></a>功能模块</h3><table>
<thead>
<tr>
<th>用户中心</th>
<th>聊天大厅</th>
<th>博文社区</th>
</tr>
</thead>
<tbody><tr>
<td>用户可以在用户中心进行个人资料设置，包括上传头像、编辑个人简介等</td>
<td>简单清新的聊天页面，快速编辑消息，在线聊天</td>
<td>在博文社区，用户可以浏览、发布和评论博文。</td>
</tr>
<tr>
<td>用户还可以搜索其他用户，并添加他们为好友</td>
<td>聊天大厅是一个实时双向通信的地方，用户可以和在线好友进行即时聊天</td>
<td>用户可以写长篇博客、发表心情随笔或分享图片等。</td>
</tr>
<tr>
<td>在用户中心，用户可以管理自己的好友列表，查看好友的动态和在线状态</td>
<td>聊天大厅还提供在线状态显示和消息通知功能，让用户能够随时随地与好友保持联系。</td>
<td>其他用户可以对博文进行点赞和评论，从而与作者进行互动和交流。</td>
</tr>
<tr>
<td>用户还可以自由组队，结交志同道合的朋友。他们可以创建和加入兴趣小组，参加线上线下的活动，分享经验和爱好。</td>
<td>用户可以发送文本消息、表情、图片和语音消息，还可以进行群聊。</td>
<td>用户还可以根据标签或关键词搜索感兴趣的博文，以扩大知识和交友圈子。</td>
</tr>
</tbody></table>
<h2 id="项目收获"><a href="#项目收获" class="headerlink" title="项目收获"></a>项目收获</h2><h2 id="效果展示"><a href="#效果展示" class="headerlink" title="效果展示"></a>效果展示</h2><h2 id="Memory-缘忆交友社区"><a href="#Memory-缘忆交友社区" class="headerlink" title="Memory 缘忆交友社区"></a>Memory 缘忆交友社区</h2><h2 id="项目概述-1"><a href="#项目概述-1" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-1"><a href="#项目名称-1" class="headerlink" title="项目名称"></a>项目名称</h3><blockquote>
<h4 id="Memory-缘忆交友社区-1"><a href="#Memory-缘忆交友社区-1" class="headerlink" title="Memory 缘忆交友社区"></a>Memory 缘忆交友社区</h4></blockquote>
<h3 id="使用场景-1"><a href="#使用场景-1" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>🎓 学校社交：在大学校园里，学生们可以通过该平台找到志同道合的朋友，组织兴趣小组、参加线下活动，分享学习经验，丰富校园生活。</li>
<li>🌆 新城市社交：在新城市里，新移民或者刚刚毕业的年轻人可以通过该平台结识新朋友，扩大社交圈子，分享生活经验和资源，融入新的生活环境。</li>
<li>💼 专业领域社交：该平台可为专业人士提供行业交流和合作的地方，包括分享行业动态、经验和资源，促进专业成长和项目合作。</li>
</ul>
<h3 id="主要功能-1"><a href="#主要功能-1" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>这是一个通信交友平台，由三个社区组成：<ul>
<li>👩‍🎓 <strong>用户中心</strong>：用户可以<strong>设置个人资料</strong>、<strong>搜索其他用户并添加好友</strong>、管理<strong>好友列表</strong>，还可以<strong>自由组队</strong>结识志同道合的朋友。</li>
<li>📞 <strong>聊天大厅</strong>：提供<strong>实时双向通信功能</strong>，用户可以和在线好友进行<strong>即时聊天</strong>，<strong>发送文字</strong>、<strong>表情</strong>、<strong>图片</strong>和<strong>语音消息</strong>，支持群聊，<strong>在线状态显示</strong>和<strong>消息通知功能</strong>增强了与好友的联系。</li>
<li>📚 <strong>博文社区</strong>：用户可以<strong>浏览、发布和评论博文</strong>，写<strong>长篇博客</strong>、<strong>心情随笔</strong>或分享图片等，与其他用户进行互动和交流，通过标签或关键词搜索感兴趣的博文，<strong>扩大知识和交友圈子</strong>。</li>
</ul>
</li>
<li>这个通信交友社区的<strong>目标</strong>是为用户提供一个互动交流的社区，让用户可以在这里<strong>找到志同道合的朋友、分享自己的想法和经验</strong>，并且享受到<strong>在线聊天</strong>、<strong>博文发布</strong>和<strong>交友组队</strong>的乐趣。</li>
</ul>
<h3 id="项目启动-1"><a href="#项目启动-1" class="headerlink" title="项目启动"></a>项目启动</h3><ul>
<li>拉取代码后，应该如何运行该项目？</li>
</ul>
<h4 id="后端-2"><a href="#后端-2" class="headerlink" title="后端"></a>后端</h4><ul>
<li>配置MySQL、Redis、Elasticsearch 为本机地址：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># MySQL配置</span><br><span class="hljs-attr">datasource:</span><br>  <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.cj.jdbc.Driver</span><br>  <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://localhost:3306/xxx</span><br>  <span class="hljs-attr">username:</span> <span class="hljs-string">xxx</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">xxx</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Redis 配置</span><br><span class="hljs-attr">redis:</span><br>  <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br>  <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  <span class="hljs-attr">timeout:</span> <span class="hljs-number">5000</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">Dw990831</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"> <span class="hljs-comment"># ES 配置</span><br><span class="hljs-attr">elasticsearch:</span><br>   <span class="hljs-attr">uris:</span> <span class="hljs-string">http://localhost:9200</span><br>   <span class="hljs-attr">username:</span> <span class="hljs-string">root</span><br>   <span class="hljs-attr">password:</span> <span class="hljs-number">123456</span><br></code></pre></td></tr></table></figure>

<h4 id="前端-2"><a href="#前端-2" class="headerlink" title="前端"></a>前端</h4><ul>
<li>确保本地 <strong>Node.js 环境配置</strong>完成，版本为 v18.xx</li>
<li>修改请求的<strong>后端地址</strong>：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs react">const instance = axios.create(&#123;<br>    baseURL: &quot;http://localhost:8081/api&quot;,<br>    withCredentials: true,<br>    timeout: 10000,<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li>执行以下命令，一键启动前端项目：</li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> serve<br></code></pre></td></tr></table></figure>

<h2 id="技术选型-1"><a href="#技术选型-1" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-3"><a href="#前端-3" class="headerlink" title="前端"></a>前端</h3><h3 id="后端-3"><a href="#后端-3" class="headerlink" title="后端"></a>后端</h3><h2 id="项目结构-1"><a href="#项目结构-1" class="headerlink" title="项目结构"></a>项目结构</h2><h3 id="架构设计-1"><a href="#架构设计-1" class="headerlink" title="架构设计"></a>架构设计</h3><h3 id="功能模块-1"><a href="#功能模块-1" class="headerlink" title="功能模块"></a>功能模块</h3><table>
<thead>
<tr>
<th>用户中心</th>
<th>聊天大厅</th>
<th>博文社区</th>
</tr>
</thead>
<tbody><tr>
<td>用户可以在用户中心进行个人资料设置，包括上传头像、编辑个人简介等</td>
<td>简单清新的聊天页面，快速编辑消息，在线聊天</td>
<td>在博文社区，用户可以浏览、发布和评论博文。</td>
</tr>
<tr>
<td>用户还可以搜索其他用户，并添加他们为好友</td>
<td>聊天大厅是一个实时双向通信的地方，用户可以和在线好友进行即时聊天</td>
<td>用户可以写长篇博客、发表心情随笔或分享图片等。</td>
</tr>
<tr>
<td>在用户中心，用户可以管理自己的好友列表，查看好友的动态和在线状态</td>
<td>聊天大厅还提供在线状态显示和消息通知功能，让用户能够随时随地与好友保持联系。</td>
<td>其他用户可以对博文进行点赞和评论，从而与作者进行互动和交流。</td>
</tr>
<tr>
<td>用户还可以自由组队，结交志同道合的朋友。他们可以创建和加入兴趣小组，参加线上线下的活动，分享经验和爱好。</td>
<td>用户可以发送文本消息、表情、图片和语音消息，还可以进行群聊。</td>
<td>用户还可以根据标签或关键词搜索感兴趣的博文，以扩大知识和交友圈子。</td>
</tr>
</tbody></table>
<h2 id="项目收获-1"><a href="#项目收获-1" class="headerlink" title="项目收获"></a>项目收获</h2><h2 id="效果展示-1"><a href="#效果展示-1" class="headerlink" title="效果展示"></a>效果展示</h2><h2 id="MemorySearch-忆搜阁"><a href="#MemorySearch-忆搜阁" class="headerlink" title="MemorySearch 忆搜阁"></a>MemorySearch 忆搜阁</h2><h2 id="项目概述-2"><a href="#项目概述-2" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-2"><a href="#项目名称-2" class="headerlink" title="项目名称"></a>项目名称</h3><blockquote>
<h4 id="MemorySearch-忆搜阁-1"><a href="#MemorySearch-忆搜阁-1" class="headerlink" title="MemorySearch 忆搜阁"></a>MemorySearch 忆搜阁</h4></blockquote>
<h3 id="项目介绍"><a href="#项目介绍" class="headerlink" title="项目介绍"></a>项目介绍</h3><ul>
<li><p>基于 Spirng Boot + Elastic Stack （+ Vue3）的一站式聚合搜索平台。用户可在同一页面集中搜索出不同来源、不同类型的内</p>
<p>容，比如专栏文章、图片、视频等、在线用户信息，提升搜索体验</p>
</li>
<li><p>已经将多个项目（如Memory 接口开放平台）的数据接入该搜索平台，极大提升开发效率、降低了系统维护成本</p>
</li>
</ul>
<h3 id="使用场景-2"><a href="#使用场景-2" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>👥 企业内部多项目数据搜索：该平台能够满足企业内部多个项目的数据搜索需求，避免每个项目都单独开发搜索功能，提升开发效率并降低系统维护成本。</li>
<li>📚 多源内容聚合搜索：当需要聚合不同来源、不同类型的内容时，该平台可以提供一站式的搜索页面，便于用户快速查找所需信息，提高工作效率。</li>
<li>💼 企业级搜索需求：对于有大规模搜索需求的企业，该平台提供了稳定的、高效的搜索功能，满足企业的搜索需求，并支持数据源接入和管理。</li>
</ul>
<h3 id="主要功能-2"><a href="#主要功能-2" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>💡 企业级一站式聚合搜索平台，整合了多个数据源的内容，并提供统一的搜索页面和界面。</li>
<li>🚀 提供高效的检索功能，用户可以在同一页面中搜索不同来源、不同类型的内容，提升检索效率和搜索体验。</li>
<li>🌐 基于 Vue3 前端和 Spring Boot 后端，利用 Elastic Stack 实现全栈项目，确保稳定可靠的运行。</li>
</ul>
<h3 id="项目启动-2"><a href="#项目启动-2" class="headerlink" title="项目启动"></a>项目启动</h3><ul>
<li>拉取代码后，应该<strong>如何运行该项目</strong>？</li>
</ul>
<h4 id="后端-4"><a href="#后端-4" class="headerlink" title="后端"></a>后端</h4><ul>
<li>配置MySQL、Redis、Elasticsearch 为本机地址：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># MySQL配置</span><br><span class="hljs-attr">datasource:</span><br>  <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.cj.jdbc.Driver</span><br>  <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://localhost:3306/xxx</span><br>  <span class="hljs-attr">username:</span> <span class="hljs-string">xxx</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">xxx</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Redis 配置</span><br><span class="hljs-attr">redis:</span><br>  <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br>  <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  <span class="hljs-attr">timeout:</span> <span class="hljs-number">5000</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">Dw990831</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"> <span class="hljs-comment"># ES 配置</span><br><span class="hljs-attr">elasticsearch:</span><br>   <span class="hljs-attr">uris:</span> <span class="hljs-string">http://localhost:9200</span><br>   <span class="hljs-attr">username:</span> <span class="hljs-string">root</span><br>   <span class="hljs-attr">password:</span> <span class="hljs-number">123456</span><br></code></pre></td></tr></table></figure>

<ul>
<li>在本地安装 Elasticsearch、Kibana、Logstash</li>
<li>在 <strong>ES 的 bin 目录</strong>下执行以下命令，启动 ES：</li>
</ul>
<figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs reasonml"><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">Elasticsearch</span>.</span></span>bat<br></code></pre></td></tr></table></figure>

<ul>
<li>在 <strong>Kibana 的 bin 目录</strong>下执行以下命令，启动 Kibana：</li>
</ul>
<figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs reasonml"><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">Kibana</span>.</span></span>bat<br></code></pre></td></tr></table></figure>

<ul>
<li>在 <strong>Logstash 的 config 目录</strong>下新增 .conf 文件，编写配置文件，做好数据映射（以下配置信息可作为参考）</li>
</ul>
<figure class="highlight puppet"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs puppet"><span class="hljs-comment"># Sample Logstash configuration for receiving</span><br><span class="hljs-comment"># UDP syslog messages over port 514</span><br><br><span class="hljs-keyword">input</span> &#123;<br>  jdbc &#123;<br>    <span class="hljs-attr">jdbc_driver_library</span> =&gt; <span class="hljs-string">&quot;D:\softWare\logstash\logstash-7.17.9\config\mysql-connector-java-8.0.29.jar&quot;</span><br>    <span class="hljs-attr">jdbc_driver_class</span> =&gt; <span class="hljs-string">&quot;com.mysql.jdbc.Driver&quot;</span><br>    <span class="hljs-attr">jdbc_connection_string</span> =&gt; <span class="hljs-string">&quot;jdbc:mysql://localhost:3306/******&quot;</span><br>    <span class="hljs-attr">jdbc_user</span> =&gt; <span class="hljs-string">&quot;******&quot;</span><br>    <span class="hljs-attr">jdbc_password</span> =&gt; <span class="hljs-string">&quot;******&quot;</span><br>    <span class="hljs-attr">statement</span> =&gt; <span class="hljs-string">&quot;SELECT * from post where updateTime &gt; :sql_last_value and updateTime &lt; now() order by updateTime desc&quot;</span><br>    <span class="hljs-attr">use_column_value</span> =&gt; <span class="hljs-keyword">true</span><br>    <span class="hljs-attr">tracking_column_type</span> =&gt; <span class="hljs-string">&quot;timestamp&quot;</span><br>    <span class="hljs-attr">tracking_column</span> =&gt; <span class="hljs-string">&quot;updatetime&quot;</span><br>    <span class="hljs-attr">schedule</span> =&gt; <span class="hljs-string">&quot;*/5 * * * * *&quot;</span><br>    <span class="hljs-attr">jdbc_default_timezone</span> =&gt; <span class="hljs-string">&quot;Asia/Shanghai&quot;</span><br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">filter</span> &#123;<br>  mutate &#123;<br>    <span class="hljs-attr">rename</span> =&gt; &#123;<br>      <span class="hljs-string">&quot;updatetime&quot;</span> =&gt; <span class="hljs-string">&quot;updateTime&quot;</span><br>      <span class="hljs-string">&quot;userid&quot;</span> =&gt; <span class="hljs-string">&quot;userId&quot;</span><br>      <span class="hljs-string">&quot;createtime&quot;</span> =&gt; <span class="hljs-string">&quot;createTime&quot;</span><br>      <span class="hljs-string">&quot;isdelete&quot;</span> =&gt; <span class="hljs-string">&quot;isDelete&quot;</span><br>    &#125;<br>    <span class="hljs-keyword">remove_field</span> =&gt; [<span class="hljs-string">&quot;thumbnum&quot;</span>, <span class="hljs-string">&quot;favournum&quot;</span>]<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">output</span> &#123;<br>  stdout &#123; <span class="hljs-attr">codec</span> =&gt; rubydebug &#125;<br><br>  <span class="hljs-keyword">elasticsearch</span> &#123;<br>    <span class="hljs-attr">hosts</span> =&gt; <span class="hljs-string">&quot;127.0.0.1:9200&quot;</span><br>    <span class="hljs-attr">index</span> =&gt; <span class="hljs-string">&quot;******&quot;</span><br>    <span class="hljs-attr">document_id</span> =&gt; <span class="hljs-string">&quot;%&#123;id&#125;&quot;</span><br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>在 Logstash 的<code>根目录</code>下执行以下命令，<strong>加载配置文件并启动 Logstash</strong>：</li>
</ul>
<figure class="highlight livescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs livescript">.<span class="hljs-string">\bin\logstash.bat</span> -f .<span class="hljs-string">\config\myTask.conf</span><br></code></pre></td></tr></table></figure>

<h4 id="前端-4"><a href="#前端-4" class="headerlink" title="前端"></a>前端</h4><ul>
<li>确保本地 <strong>Node.js 环境配置</strong>完成，版本为 v18.xx</li>
<li>修改请求的<strong>后端地址</strong>：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs react">const instance = axios.create(&#123;<br>    baseURL: &quot;http://localhost:8081/api&quot;,<br>    withCredentials: true,<br>    timeout: 10000,<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li>执行以下命令，一键启动前端项目：</li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> serve<br></code></pre></td></tr></table></figure>

<h2 id="技术选型-2"><a href="#技术选型-2" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-5"><a href="#前端-5" class="headerlink" title="前端"></a>前端</h3><h3 id="后端-5"><a href="#后端-5" class="headerlink" title="后端"></a>后端</h3><h2 id="项目结构-2"><a href="#项目结构-2" class="headerlink" title="项目结构"></a>项目结构</h2><h3 id="架构设计-2"><a href="#架构设计-2" class="headerlink" title="架构设计"></a>架构设计</h3><h3 id="功能模块-2"><a href="#功能模块-2" class="headerlink" title="功能模块"></a>功能模块</h3><h4 id="用户中心"><a href="#用户中心" class="headerlink" title="用户中心"></a>用户中心</h4><ul>
<li>用户可以在用户中心进行个人资料设置，包括上传头像、编辑个人简介等</li>
<li>用户还可以搜索其他用户，并添加他们为好友</li>
<li>在用户中心，用户可以管理自己的好友列表，查看好友的动态和在线状态</li>
<li>用户还可以自由组队，结交志同道合的朋友。他们可以创建和加入兴趣小组，参加线上线下的活动，分享经验和爱好。</li>
</ul>
<h4 id="聊天大厅"><a href="#聊天大厅" class="headerlink" title="聊天大厅"></a>聊天大厅</h4><ul>
<li>简单清新的聊天页面</li>
<li>快速编辑消息，在线聊天</li>
<li>聊天大厅是一个实时双向通信的地方，用户可以和在线好友进行即时聊天。</li>
<li>用户可以发送文本消息、表情、图片和语音消息，还可以进行群聊。</li>
<li>聊天大厅还提供在线状态显示和消息通知功能，让用户能够随时随地与好友保持联系。</li>
</ul>
<h4 id="博文社区"><a href="#博文社区" class="headerlink" title="博文社区"></a>博文社区</h4><ul>
<li>在博文社区，用户可以浏览、发布和评论博文。</li>
<li>用户可以写长篇博客、发表心情随笔或分享图片等。</li>
<li>其他用户可以对博文进行点赞和评论，从而与作者进行互动和交流。</li>
<li>用户还可以根据标签或关键词搜索感兴趣的博文，以扩大知识和交友圈子。</li>
</ul>
<h2 id="效果展示-2"><a href="#效果展示-2" class="headerlink" title="效果展示"></a>效果展示</h2><p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20231001210412461.png" alt="image-20231001210412461"></p>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20231001210420054.png" alt="image-20231001210420054"></p>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20231001210426079.png" alt="image-20231001210426079"></p>
<h2 id="Memory-API-接口开放平台"><a href="#Memory-API-接口开放平台" class="headerlink" title="Memory API 接口开放平台"></a>Memory API 接口开放平台</h2><h2 id="项目概述-3"><a href="#项目概述-3" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-3"><a href="#项目名称-3" class="headerlink" title="项目名称"></a>项目名称</h3><h3 id="使用场景-3"><a href="#使用场景-3" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>📊 开放平台的接口提供：适用于需要提供 API 接口给其他开发者或应用程序使用的项目。</li>
<li>👨‍💻 接口管理和调试：管理员和开发者可以使用该平台进行接口管理、调试和监控。</li>
<li>💻 应用程序开发：开发者可以在代码中使用提供的 SDK 快速调用接口，加速应用程序开发。</li>
<li>💰 计费与限制管理：适用于需要对接口调用进行计费和限制的项目，提供了灵活的计费和充值系统。</li>
</ul>
<h3 id="主要功能-3"><a href="#主要功能-3" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>🚀 全栈微服务项目，提供 API 接口供开发者调用的平台，以满足各种应用程序的接口需求。</li>
<li>👮‍♂️ 管理员功能：接入和发布接口、统计接口调用情况，方便管理和监控接口的使用情况。</li>
<li>👥 用户功能：注册登录并开通接口调用权限、浏览接口、在线调试。使用客户端 SDK，轻松在代码中调用接口。</li>
<li>💰 计费系统：用户对每个接口的调用有限制，可以通过登录免费领取次数或充值获取次数。</li>
<li>📝 用户上传接口：用户可下载平台提供的 SDK 请求库，封装并发布自己设计的接口，供其他开发者使用。</li>
</ul>
<h3 id="项目启动-3"><a href="#项目启动-3" class="headerlink" title="项目启动"></a>项目启动</h3><ul>
<li>拉取代码后，应该如何运行该项目？</li>
</ul>
<h4 id="后端-6"><a href="#后端-6" class="headerlink" title="后端"></a>后端</h4><ul>
<li>配置Nacos、MySQL、Redis 为本机地址：</li>
</ul>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># 数据库配置</span><br><span class="hljs-attr">datasource:</span><br>  <span class="hljs-attr">driver-class-name:</span> <span class="hljs-string">com.mysql.cj.jdbc.Driver</span><br>  <span class="hljs-attr">url:</span> <span class="hljs-string">jdbc:mysql://localhost:3306/xxx</span><br>  <span class="hljs-attr">username:</span> <span class="hljs-string">xxx</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">xxx</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-comment"># Redis 配置</span><br><span class="hljs-attr">redis:</span><br>  <span class="hljs-attr">database:</span> <span class="hljs-number">0</span><br>  <span class="hljs-attr">host:</span> <span class="hljs-string">localhost</span><br>  <span class="hljs-attr">port:</span> <span class="hljs-number">6379</span><br>  <span class="hljs-attr">timeout:</span> <span class="hljs-number">5000</span><br>  <span class="hljs-attr">password:</span> <span class="hljs-string">Dw990831</span><br></code></pre></td></tr></table></figure>

<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">dubbo:</span><br>  <span class="hljs-attr">application:</span><br>    <span class="hljs-attr">name:</span> <span class="hljs-string">dubbo-springboot-demo-provider</span><br>  <span class="hljs-attr">protocol:</span><br>    <span class="hljs-attr">name:</span> <span class="hljs-string">dubbo</span><br>    <span class="hljs-attr">port:</span> <span class="hljs-number">-1</span><br>  <span class="hljs-attr">registry:</span><br>    <span class="hljs-attr">id:</span> <span class="hljs-string">nacos-registry</span><br>    <span class="hljs-attr">address:</span> <span class="hljs-string">nacos://localhost:8848</span><br></code></pre></td></tr></table></figure>

<ul>
<li>首先在<strong>本地启动 nacos</strong>（bin 目录下执行）：</li>
</ul>
<figure class="highlight dos"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs dos">startup.<span class="hljs-built_in">cmd</span> -m standalone<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="依次启动-memory-api-backend、gateway、memory-client"><a href="#依次启动-memory-api-backend、gateway、memory-client" class="headerlink" title="依次启动 memory-api-backend、gateway、memory-client"></a>依次启动 memory-api-backend、gateway、memory-client</h5></li>
</ul>
<h4 id="前端-6"><a href="#前端-6" class="headerlink" title="前端"></a>前端</h4><ul>
<li>确保本地 <strong>Node.js 环境配置</strong>完成，版本为 v18.xx</li>
<li>修改请求的<strong>后端地址</strong>：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs react">baseURL: process.env.NODE_ENV === &#x27;production&#x27; ? &#x27;http://120.55.62.195:8102&#x27; : &#x27;http://localhost:8102&#x27;,<br>withCredentials: true,<br></code></pre></td></tr></table></figure>

<ul>
<li>执行以下命令，一键启动前端项目：</li>
</ul>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs vim">yarn <span class="hljs-keyword">star</span><span class="hljs-variable">t:dev</span><br></code></pre></td></tr></table></figure>

<h2 id="技术选型-3"><a href="#技术选型-3" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="后端-7"><a href="#后端-7" class="headerlink" title="后端"></a>后端</h3><ul>
<li>Java Spring Boot 框架</li>
<li>MySQL 数据库</li>
<li>Mybatis-Plus 及 MyBatis X 自动生成</li>
<li>API 签名认证（HTTP 调用）</li>
<li>Spring Boot Starter（SDK 开发）</li>
<li>Dubbo 分布式（RPC、Nacos）</li>
<li>Spring Cloud Gateway 微服务网关</li>
<li>Swagger + Knife4j 接口文档生成</li>
<li>Hutool、Apache Common Utils、Gson 等工具库</li>
</ul>
<h3 id="前端-7"><a href="#前端-7" class="headerlink" title="前端"></a>前端</h3><ul>
<li>React 18</li>
<li>Ant Design Pro 5.x 脚手架</li>
<li>Ant Design % Procomponents 组件库</li>
<li>Umi 4 前端框架</li>
<li>OpenAPI 前端代码生成</li>
</ul>
<h2 id="项目结构-3"><a href="#项目结构-3" class="headerlink" title="项目结构"></a>项目结构</h2><h3 id="架构设计-3"><a href="#架构设计-3" class="headerlink" title="架构设计"></a>架构设计</h3><h3 id="功能模块-3"><a href="#功能模块-3" class="headerlink" title="功能模块"></a>功能模块</h3><h4 id="接口管理"><a href="#接口管理" class="headerlink" title="接口管理"></a>接口管理</h4><h4 id="用户管理"><a href="#用户管理" class="headerlink" title="用户管理"></a>用户管理</h4><h4 id="接口调用（在线调试）"><a href="#接口调用（在线调试）" class="headerlink" title="接口调用（在线调试）"></a>接口调用（在线调试）</h4><h2 id="效果展示-3"><a href="#效果展示-3" class="headerlink" title="效果展示"></a>效果展示</h2><h2 id="项目收获-2"><a href="#项目收获-2" class="headerlink" title="项目收获"></a>项目收获</h2><h2 id="PicMemories壁纸分享小程序"><a href="#PicMemories壁纸分享小程序" class="headerlink" title="PicMemories壁纸分享小程序"></a>PicMemories壁纸分享小程序</h2><h2 id="项目概述-4"><a href="#项目概述-4" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-4"><a href="#项目名称-4" class="headerlink" title="项目名称"></a>项目名称</h3><h3 id="使用场景-4"><a href="#使用场景-4" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>📱 壁纸分享平台：适用于用户分享和下载壁纸的平台，让用户发现和收藏自己喜欢的壁纸作品。</li>
<li>👩‍💻 设计师社交：适用于设计师等专业人士展示和分享自己的壁纸作品，并与其他用户进行互动和交流。</li>
<li>🌐 壁纸应用开发：适用于需要开发壁纸相关功能的小程序或移动应用项目，提供壁纸的浏览、搜索、上传和互动等功能。</li>
</ul>
<h3 id="主要功能-4"><a href="#主要功能-4" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>🖼️ 壁纸浏览与搜索：展示热门、推荐和最新的壁纸，提供搜索入口和分类导航，让用户方便浏览和选择壁纸。</li>
<li>📋 壁纸详情页：展示壁纸的详细信息和相关操作，包括点赞、收藏和评论等，增加用户的互动和参与感。</li>
<li>👤 用户个人中心：展示用户的个人信息、上传作品和相关动态，包括收藏、点赞和关注等，提供账号设置和退出登录功能。</li>
<li>📷 壁纸上传与审核：允许用户上传自己的壁纸作品，并经过审核机制确保壁纸质量和合法性。</li>
<li>🔍 关键词搜索和推荐：提供关键词搜索功能，让用户根据关键词查找特定的壁纸。同时，基于用户喜好进行个性化的壁纸推荐。</li>
</ul>
<h2 id="技术选型-4"><a href="#技术选型-4" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-8"><a href="#前端-8" class="headerlink" title="前端"></a>前端</h3><ul>
<li>微信小程序开发工具：用于创建、调试和发布微信小程序。</li>
<li>HTML5、CSS3、JavaScript：主要用于构建小程序的页面结构、样式和交互效果。</li>
<li>微信小程序框架：可选择使用原生小程序框架或者类似Vue.js的框架（如MpVue或WePY）来提高开发效率。</li>
</ul>
<h3 id="后端-8"><a href="#后端-8" class="headerlink" title="后端"></a>后端</h3><ul>
<li>Java语言：作为后端开发语言，具有广泛的应用性和强大的生态系统。</li>
<li>Spring Boot框架：用于快速搭建后端服务，提供路由、控制器、数据持久化等功能。</li>
<li>MySQL数据库：作为数据存储和管理系统，用于存储用户信息、壁纸数据等。</li>
<li>Redis缓存：作为缓存数据库，用于提高数据访问的性能和响应速度。</li>
<li>Mybatis：用于数据库操作和管理的ORM（对象关系映射）框架，简化了与数据库的交互。</li>
<li>MybatisPlus：Mybatis的增强工具，提供更多便捷的功能，如代码生成器和数据库分页等。</li>
</ul>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul>
<li>Git：用于版本控制和团队协作。</li>
<li>Postman：用于测试接口和调试后端服务。</li>
<li>微信公众平台接口和SDK：用于与微信小程序进行接口交互和调用。</li>
</ul>
<h2 id="Memory-伙伴匹配系统"><a href="#Memory-伙伴匹配系统" class="headerlink" title="Memory 伙伴匹配系统"></a>Memory 伙伴匹配系统</h2><h2 id="项目概述-5"><a href="#项目概述-5" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-5"><a href="#项目名称-5" class="headerlink" title="项目名称"></a>项目名称</h3><h3 id="使用场景-5"><a href="#使用场景-5" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>👥 学习伙伴匹配：适用于用户寻找学习伙伴、组队学习或开展项目开发等活动。</li>
<li>📱 移动端应用开发：适用于需要开发移动端 H5 网站的项目，具备用户登录和信息管理、搜索和匹配等功能。</li>
<li>👨‍💻 技术学习和实践：适用于希望学习项目开发、调试和优化技巧的开发，增强自主解决问题的能力。</li>
</ul>
<h3 id="主要功能-5"><a href="#主要功能-5" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>🚀 移动端 H5 网站，用于帮助用户找到学习伙伴的匹配系统。</li>
<li>👥 用户登录和个人信息管理：包括用户登录和更新个人信息等功能，方便用户管理自己的账户和个人资料。</li>
<li>🔍 按标签搜索用户：用户通过选择标签进行搜索，以寻找具有相似兴趣或需求的学习伙伴。</li>
<li>👫 建房组队功能：用户可以发起建房组队请求，邀请其他用户一起组队学习或参与项目开发等活动。</li>
<li>📋 推荐相似用户：系统根据用户兴趣和标签等信息，推荐与之相似的用户，提升匹配效果。</li>
</ul>
<h2 id="技术选型-5"><a href="#技术选型-5" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-9"><a href="#前端-9" class="headerlink" title="前端"></a>前端</h3><ul>
<li>Vue 3</li>
<li>Vant UI 组件库</li>
<li>Vite 脚手架</li>
<li>Axios 请求库</li>
</ul>
<h3 id="后端-9"><a href="#后端-9" class="headerlink" title="后端"></a>后端</h3><ul>
<li>Java SpringBoot 框架</li>
<li>MySQL 数据库</li>
<li>MyBatis-Plus</li>
<li>MyBatis X 自动生成代码</li>
<li>Redis 缓存（多种Java实现方式）</li>
<li>Redis 分布式登录</li>
<li>Redission 分布式锁</li>
<li>Easy Excel 数据导入</li>
<li>Spring Scheduler 定时任务</li>
<li>ASwagger + Knife4j 接口文档</li>
<li>Gson：JSON 序列化库</li>
<li>相似度匹配算法</li>
</ul>
<h2 id="Memory-用户中心系统"><a href="#Memory-用户中心系统" class="headerlink" title="Memory 用户中心系统"></a>Memory 用户中心系统</h2><h2 id="项目概述-6"><a href="#项目概述-6" class="headerlink" title="项目概述"></a>项目概述</h2><h3 id="项目名称-6"><a href="#项目名称-6" class="headerlink" title="项目名称"></a>项目名称</h3><h3 id="使用场景-6"><a href="#使用场景-6" class="headerlink" title="使用场景"></a>使用场景</h3><ul>
<li>👨‍💻 学习项目：适用于小白开发者学习和掌握通用的技术和项目开发经验。</li>
<li>📚 企业级用户管理：适用于需要构建企业级用户中心的项目，快速实现用户管理功能。</li>
<li>👩‍💼 业务应用开发：适用于需要基础用户管理功能的业务应用开发，可以快速搭建用户注册登录功能。</li>
</ul>
<h3 id="主要功能-6"><a href="#主要功能-6" class="headerlink" title="主要功能"></a>主要功能</h3><ul>
<li>🚀 企业级用户中心系统，用于实现用户注册、登录、查询等基础功能，无需关注复杂的业务流程。</li>
<li>👥 提供用户管理：包括用户注册、登录等功能，帮助开发者了解和学习通用的用户管理技术和流程。</li>
<li>🔒 实现用户鉴权：通过身份验证功能，保障用户数据的安全性和访问权限。</li>
<li>🔍 提供用户查询功能：支持用户信息的查询，方便开发者管理和了解用户的相关信息。</li>
</ul>
<h2 id="技术选型-6"><a href="#技术选型-6" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="前端-10"><a href="#前端-10" class="headerlink" title="前端"></a>前端</h3><ul>
<li>HTML + CSS + JavaScript 三件套</li>
<li>React 开发框架</li>
<li>Ant Design Pro 项目模板</li>
<li>Ant Design 端组件库</li>
<li>Umi 开发框架</li>
<li>Umi Request 请求库</li>
<li>正向和反向代理</li>
</ul>
<h3 id="后端-10"><a href="#后端-10" class="headerlink" title="后端"></a>后端</h3><ul>
<li>Java 编程语言</li>
<li>Spring + SpringMVC + SpringBoot 框架</li>
<li>MyBatis + MyBatis Plus 数据访问框架</li>
<li>MySQL 数据库</li>
<li>jUnit 单元测试库</li>
</ul>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><ul>
<li>Linux 单机部署</li>
<li>Nginx Web 服务器</li>
<li>Docker 容器</li>
<li>容器托管平台</li>
</ul>
<h2 id="黄金矿工怀旧版"><a href="#黄金矿工怀旧版" class="headerlink" title="黄金矿工怀旧版"></a>黄金矿工怀旧版</h2><h2 id="坦克大战"><a href="#坦克大战" class="headerlink" title="坦克大战"></a>坦克大战</h2><h2 id="网络通讯平台"><a href="#网络通讯平台" class="headerlink" title="网络通讯平台"></a>网络通讯平台</h2><h2 id="餐厅点餐服务"><a href="#餐厅点餐服务" class="headerlink" title="餐厅点餐服务"></a>餐厅点餐服务</h2><h2 id="房屋出租系统"><a href="#房屋出租系统" class="headerlink" title="房屋出租系统"></a>房屋出租系统</h2><h2 id="零钱通服务"><a href="#零钱通服务" class="headerlink" title="零钱通服务"></a>零钱通服务</h2><h2 id="职工管理系统"><a href="#职工管理系统" class="headerlink" title="职工管理系统"></a>职工管理系统</h2><h2 id="演讲比赛管理系统"><a href="#演讲比赛管理系统" class="headerlink" title="演讲比赛管理系统"></a>演讲比赛管理系统</h2><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1>
                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B/" class="category-chain-item">项目简介</a>
  
  
    <span>></span>
    
  <a href="/categories/%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/" class="category-chain-item">架构设计</a>
  
  
    <span>></span>
    
  <a href="/categories/%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/Gitee-Github/" class="category-chain-item">Gitee/Github</a>
  
  
    <span>></span>
    
  <a href="/categories/%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/Gitee-Github/%E7%BB%8F%E9%AA%8C/" class="category-chain-item">经验</a>
  
  

  

  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E7%BB%8F%E9%AA%8C/">#经验</a>
      
        <a href="/tags/%E9%A1%B9%E7%9B%AE%E7%AE%80%E4%BB%8B/">#项目简介</a>
      
        <a href="/tags/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/">#架构设计</a>
      
        <a href="/tags/Gitee-Github/">#Gitee/Github</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>项目回顾 - 实践经验和收获总结</div>
      <div>http://example.com/2023/04/22/项目回顾 - 实践经验和收获总结/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Memory</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年4月22日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2024年4月11日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/05/21/%E6%8E%A2%E7%B4%A2%20Python%20%E7%88%AC%E8%99%AB%E7%9A%84%E6%97%A0%E9%99%90%E5%8F%AF%E8%83%BD%E6%80%A7%EF%BC%9A%E5%9F%BA%E7%A1%80%E4%B8%8E%E5%BA%94%E7%94%A8/" title="探索Python爬虫的无限可能性：基础与应用">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">探索Python爬虫的无限可能性：基础与应用</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/04/14/%E7%AE%97%E6%B3%95%E7%9B%9B%E5%AE%B4%EF%BC%9A%E7%BB%8F%E5%85%B8%E9%A2%98%E8%A7%A3%E4%B8%8E%E5%AE%9E%E6%88%98%E7%AD%96%E7%95%A5/" title="算法盛宴：经典题解与实战策略">
                        <span class="hidden-mobile">算法盛宴：经典题解与实战策略</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments">
      

    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>Memory | 个人文档站点</span> </a>
<i class="iconfont icon-love"></i> <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>配置指南 | Hexo Fluid 用户手册</span> </a>   
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="leancloud-site-pv-container" style="display: none">
        总访问量 
        <span id="leancloud-site-pv"></span>
         次
      </span>
    
    
      <span id="leancloud-site-uv-container" style="display: none">
        总访客数 
        <span id="leancloud-site-uv"></span>
         人
      </span>
    
    

  
</div>

  
  
    <!-- 备案信息 ICP for China -->
    <div class="beian">
  <span>
    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
      京ICP证123456号
    </a>
  </span>
  
    
      <span>
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
          rel="nofollow noopener"
          class="beian-police"
          target="_blank"
        >
          
            <span style="visibility: hidden; width: 0">|</span>
            <img src="/img/police_beian.png" alt="police-icon"/>
          
          <span>京公网安备12345678号</span>
        </a>
      </span>
    
  
</div>

  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>







  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="/js/leancloud.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
